<template>
  <div class="testing">
    <div class="testingReport testingNone relative">
      <div>
        <div class="reportText">
          <van-field class="reportBottom" readonly v-model="params.value"
            @click="environmentShow = true"
          >
            <template #right-icon>
              <img
                class="arrowBottomInput"
                src="@/assets/arrowBottomInput.png"
              />
            </template>
          </van-field>
          <van-field
            class="reportDate"
            readonly
            v-model="params.date"
            placeholder="请选择日期"
          >
            <template #right-icon>
              <img
                style="margin-left: 4px"
                class="arrowBottomInput"
                src="@/assets/dateInput.png"
              />
            </template>
          </van-field>
        </div>
        <div class="reportContent">
          <div>{{params.value}}折线图</div>
          <van-field class="reportBottom" readonly v-model="params.select" @click="lineDataShow = true">
            <template #right-icon>
              <img
                class="arrowBottomInput"
                src="@/assets/arrowRightInput.png"
              />
            </template>
          </van-field>
        </div>
        <div class="main" ref="echart_china"></div>
      </div>
      <img class="lineByLeft" src="@/assets/lineBy.png" />
      <img class="lineByRight" src="@/assets/lineBy.png" />
    </div>
    <div class="testingReport testingNone pTip">
      <div class="flexBet greenColor">生长记录</div>
      <timeline></timeline>
    </div>
<van-popup v-model="environmentShow" round position="bottom">
  <van-picker
    show-toolbar
    title="选择环境数据"
    :columns="environmentData"
    @cancel="environmentShow = false"
    @confirm="onConfirm"
    value-key="name"
  />
</van-popup>
<van-popup v-model="lineDataShow" round position="bottom">
  <van-picker
    show-toolbar
    title="选择折线图数据"
    :columns="params.value === '空气温度' ? lineData : lineData2"
    @cancel="lineDataShow = false"
    @confirm="lineOnConfirm"
    value-key="name"
  />
</van-popup>

  </div>
</template>

<script>
import {
  getpesticideResiduesByIdApi,
  getSamplingReportByIdApi
} from '@/api/tracing'
import line from './echart/line'
import line2 from './echart/line2'
import timeline from '../components/timeline'
export default {
  name: 'ShuzhongtianH5Testing',
  components: {
    timeline
  },
  data () {
    return {
      line,
      line2,
      params: {
        date: '2024/04-2024/11',
        value: '空气温度',
        select: '全部'
      },
      soilReport: [],
      watherReport: [],
      pesticideRepost: [],
      reportList: [],
      reportShow: false,
      isOpen: [1],
      environmentShow: false,
      lineDataShow: false,
      environmentData: [{ name: '空气温度', id: 1 }, { name: '光照度', id: 2 }],
      lineData: [{ name: '全部', id: 1 }, { name: '最高温度', id: 3 }, { name: '最低温度', id: 3 }, { name: '平均温度', id: 3 }],
      lineData2: [{ name: '全部', id: 1 }, { name: '最高光照', id: 3 }, { name: '最低光照', id: 3 }, { name: '平均光照', id: 3 }]
    }
  },

  mounted () {
    // if (this.$store.state.suyuan.soilids !== null && this.$store.state.suyuan.soilids !== '') {
    // this.params.soilids = this.$store.state.suyuan.soilids.split(',')
    // }
    // if (this.$store.state.suyuan.waterids !== null && this.$store.state.suyuan.waterids !== '') {
    // this.params.waterids = this.$store.state.suyuan.waterids.split(',')
    // }
    // if (this.$store.state.suyuan.pesticideids !== null && this.$store.state.suyuan.pesticideids !== '') {
    // this.params.pesticideids =
    // this.$store.state.suyuan.pesticideids.split(',')
    // }
    // this.getReportUrl()
    this.myEcharts()
  },

  methods: {
    myEcharts () {
      const myChart = this.$echarts.init(this.$refs.echart_china)
      const option = this.params.value === '空气温度' ? line : line2
      option.series[1].lineStyle.width = 1
      if (this.params.value === '空气温度') {
        option.legend.data = ['最高温度', '最低温度']
      } else {
        option.legend.data = ['最高光照', '最低光照']
      }
      if (this.params.select !== '全部') {
        option.legend.data = [this.params.select]
        option.series[1].lineStyle.width = 0
      }
      console.log(option.legend)
      myChart.setOption(option)
    },
    onConfirm (e) {
      this.params.value = e.name
      this.environmentShow = false
      this.myEcharts()
    },
    lineOnConfirm (e) {
      this.params.select = e.name
      this.lineDataShow = false
      this.myEcharts()
    },
    async getReportUrl () {
      // 土壤
      if (this.params.soilids !== '' && this.params.soilids !== null) {
        for (let i = 0; i < this.params.soilids.length; i++) {
          const res = await getSamplingReportByIdApi({
            id: this.params.soilids[i],
            reportType: 0
          })
          this.soilReport.push(res.data)
        }
      }
      // 水质
      if (this.params.waterids !== '' && this.params.waterids !== null) {
        for (let i = 0; i < this.params.waterids.length; i++) {
          const res1 = await getSamplingReportByIdApi({
            id: this.params.waterids[i],
            reportType: 1
          })
          this.watherReport.push(res1.data)
        }
      }
      // 农残
      if (
        this.params.pesticideids !== '' &&
        this.params.pesticideids !== null
      ) {
        for (let i = 0; i < this.params.pesticideids.length; i++) {
          console.log(this.params.pesticideids)
          const res2 = await getpesticideResiduesByIdApi(
            this.params.pesticideids[i]
          )
          this.pesticideRepost.push(res2.data)
          console.log(this.pesticideRepost)
        }
      }
      this.reportList.push(...this.soilReport, ...this.watherReport)
      if (this.reportList !== null && this.pesticideRepost !== null) {
        this.reportShow = false
      } else {
        this.reportShow = true
      }
      console.log(this.reportList, '水质土壤')
      console.log(this.pesticideRepost, '农残')
    },
    openReport (pdf) {
      window.open(pdf, '_blank')
    }
  }
}
</script>
<style lang="scss" scoped>
.testing {
  padding: 1.5vh 3.2vw 2vh;
}
.testingReport {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 1vh 3vw;
  border-radius: 1vw;
  .reportImage {
    height: 8vh;
    margin-right: 2vw;
  }
  .reportText {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .reportDate {
      width: 162px;
      ::v-deep .van-field__control {
        color: #9ba5a2;
      }
      .arrowBottomInput {
        width: 18px;
      }
    }
    .reportBottom {
      width: 108px;
      border: 1px solid #e7e9e8;
      padding: 4.5px 15px 3.5px 15px;
      border-radius: 8px;
      font-size: 16px;
      ::v-deep .van-field__control {
        color: #19b560;
        font-weight: bold;
      }
      .arrowBottomInput {
        width: 19px;
      }
    }
  }
  .reportContent {
    padding-left: 3px;
    font-size: 12px;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .reportBottom {
      width: 100px;
      margin-right: 10px;
      border: 1px solid #e7e9e8;
      padding: 4.5px 15px 3.5px 15px;
      border-radius: 8px;
      font-size: 12px;
      .arrowBottomInput {
        width: 26px;
      }
    }
  }
  .arrowRight {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2.5vw;
    margin: auto;
    width: 5.5vw;
    height: 5vw;
  }
}
.testingNone {
  display: block;
  .reportContent {
    width: 100%;
  }
}
::v-deep .van-field__right-icon {
  display: flex;
  align-items: center;
  padding: 0;
}
.relative {
  position: relative;
}
.pTop {
  margin-top: 1.2vh !important;
}
.pTip {
  margin-top: 1.4vh !important;
}
.main {
  height: 200px;
}
.flexBet {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flexStart {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.lineByLeft {
  height: 43px;
  position: absolute;
  bottom: -28px;
  left: 2.5vw;
  z-index: 10;
}
.lineByRight {
  height: 43px;
  position: absolute;
  bottom: -28px;
  right: 2.5vw;
  z-index: 10;
}
.greenColor {
  color: #19b560;
  font-weight: bold;
  margin-top: 25px;
  margin-bottom: 15px;
}
::v-deep .van-picker__confirm {
  color: #19b560;
}
</style>
